<style>
.img { background: #fff; width: 75px; padding: 5px 5px 15px 5px; margin: 0 2px; border: 1px solid #666; display: inline-block; }
.img img { cursor: pointer; }
.img td { font-size: 11px !important; }
.img i { cursor: pointer !important; }
.img i { cursor: pointer !important; }
.chosen-choices { height: 25px !important; width: 550px !important; }
.chosen-choices input[type=text] { height: 25px !important; width: 350px !important; }
</style>
<?php 
$_SESSION[TINYMCE_UPLOAD] = 'upload/plugins/' . basename(dirname(__FILE__)) . '/';
if (!file_exists('../' . $_SESSION[TINYMCE_UPLOAD])) {
  Utils::create('../' . $_SESSION[TINYMCE_UPLOAD]);
}

$data = $orm->get('pb_ht_hm_data', NULL, NULL, 1, 1, NULL)->d;
if (count($data) == 0) {
  $obj = new stdClass();
  $obj->ad_top = '';
  $obj->ad_middle = '';
  $obj->ad_bottom = '';
  $obj->cats1 = '';
  $obj->cats2 = '';
  $orm->add('pb_ht_hm_data', $obj);
  $obj->id = $orm->last_id();
  $data[] = $obj;
}

$images = $orm->get('pb_ht_hm_image', NULL, NULL, NULL, NULL, NULL)->d;

$opts = new stdClass();
$opts->cd = 't.parent_id = :v1';
$opts->cdv = array(':v1' => 0);
$categories = $orm->get('pb_ht_category', NULL, NULL, NULL, NULL, $opts)->d;
?>
<div class="pure-form pure-form-aligned" style="padding: 10px; width: 790px;">
  <legend>主页数据</legend>

    
  <div class="pure-control-group">
    <label>图片 (单个最大2M)<br>宽x高=5x3左右<br><span id="uploader"></span></label>
    <div id="images" style="text-align: left; padding-left: 11em; margin-top: -20px; min-height: 60px;">&nbsp;</div>
  </div>
  
  <div class="pure-control-group">
    <label>内容（上）</label>
    <label><textarea id="ad_top"></textarea></label>
  </div>
  
  <div class="pure-control-group">
    <label>内容（中）</label>
    <label><textarea id="ad_middle"></textarea></label>
  </div>
  
  <div class="pure-control-group">
    <label>内容（下）</label>
    <label><textarea id="ad_bottom"></textarea></label>
  </div>
  
  <div class="pure-control-group">
    <label>栏目（上）</label>
    <select id="cats1" multiple="multiple"></select>
  </div>
  
  <div class="pure-control-group">
    <label>栏目（下）</label>
    <select id="cats2" multiple="multiple"></select>
  </div>
  
  <div class="pure-control-group">
    <label>&nbsp;</label>
    <button class="pure-button pure-input-1-2 pure-button-primary" onclick="submit_obj();">Save</button>
  </div>
</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __session_id = '<?php echo session_id(); ?>';
  var __dir = '<?php echo PLGN_DIR . basename(dirname(__FILE__)); ?>';
  var __images = JSON.parse('<?php echo addslashes(json_encode($images)); ?>');
  var __categories = JSON.parse('<?php echo addslashes(json_encode($categories)); ?>');
  
  $(function(){
    
    $('#ad_top').val(__data[0].ad_top);
    $('#ad_middle').val(__data[0].ad_middle);
    $('#ad_bottom').val(__data[0].ad_bottom);
    tinyMCE.init( {
      // General options
      mode: 'exact',
      elements: 'ad_top,ad_middle,ad_bottom',
      theme: 'advanced',
      height: 200,

      plugins: 'pdw,filebrowser,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist',
      // Theme options
      theme_advanced_buttons1: 'pdw_toggle,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,|,forecolor,backcolor,|,image,media,|,code,preview,|,fullscreen',
      theme_advanced_buttons2: 'search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,cleanup,help,|,insertdate,inserttime',
      theme_advanced_buttons3: 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,print,|,ltr,rtl',
      theme_advanced_buttons4: 'insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak',
      theme_advanced_toolbar_location: 'top',
      theme_advanced_toolbar_align: 'left',
      theme_advanced_statusbar_location: 'bottom',
      theme_advanced_resizing: true,

      file_browser_callback: 'filebrowser',
      pdw_toggle_on: '1',
      pdw_toggle_toolbars: '2,3,4',

      theme_advanced_resizing: true,
      theme_advanced_resize_horizontal: false,
      
      // Example content CSS (should be your site CSS)
      theme_advanced_font_sizes: '10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px',
    });

    Upload.init(
      'uploader', 
      __requrl + 'upload_icon', 
      function(rslt, srv_err) {
        __images = __images.concat(rslt);
        render_images();
      }, 
      {
        file_size_limit: '2MB',
        upload_start_handler: function(file) {
          this.setPostParams({
            PHPSESSID: __session_id
          });
        },
        debug: 0
      }
    );

    __data[0].cats1 = Utils.parse(__data[0].cats1);
    __data[0].cats2 = Utils.parse(__data[0].cats2);
    render();
  });


  function render() {

    render_data();
  };
  
  function render_data() {
    render_images();
    
    if (tinyMCE.get('ad_top')) {
      tinyMCE.get('ad_top').setContent(__data[0].ad_top);
    } else {
      $('#ad_top').val(__data[0].ad_top);
    }

    if (tinyMCE.get('ad_middle')) {
      tinyMCE.get('ad_middle').setContent(__data[0].ad_middle);
    } else {
      $('#ad_middle').val(__data[0].ad_middle);
    }

    if (tinyMCE.get('ad_bottom')) {
      tinyMCE.get('ad_bottom').setContent(__data[0].ad_bottom);
    } else {
      $('#ad_bottom').val(__data[0].ad_bottom);
    }

    $('#cats1').empty();
    $('#cats2').empty();
    $('#cats1').append('<option value="0">&nbsp;</option>');
    $('#cats2').append('<option value="0">&nbsp;</option>');
    
    for (var idx in __categories) {
      var itm = __categories[idx];
      $('#cats1').append('<option value="' + itm.id + '" ' + (($.inArray(itm.id, __data[0].cats1) == -1) ? '' : 'selected="selected"') + '>' + itm.name + '</option>');
    }
    for (var idx in __categories) {
      var itm = __categories[idx];
      $('#cats2').append('<option value="' + itm.id + '" ' + (($.inArray(itm.id, __data[0].cats2) == -1) ? '' : 'selected="selected"') + '>' + itm.name + '</option>');
    }

    $('#cats1').chosen();
    $('#cats2').chosen();
    $("#cats1").trigger("chosen:updated");
    $("#cats2").trigger("chosen:updated");
  };

  function render_images() {
    $('#images').empty();
    for (var idx in __images) {
      var itm = __images[idx];
      $('#images').append(
          '<table cellpadding=0 cellspacing=0 class="img">' +
            '<tr><td style="text-align: right;"><i class="fa fa-times" onclick="delete_file(\'' + itm.id + '\');"></i></td></tr>' +
            '<tr><td><a rel="prettyPhoto[gallery1]" href="' + itm.link + '"><img style="height: 40px; width: 60px;" src="' + itm.link + '"></img></a></td></tr>' +
          '</table>');
    }
    $("a[rel^='prettyPhoto']").prettyPhoto({
      social_tools: ''
    });
  };

  function submit_obj() {
    
    req = __data[0];
    req.ad_top = tinyMCE.get('ad_top').getContent();
    req.ad_middle = tinyMCE.get('ad_middle').getContent();
    req.ad_bottom = tinyMCE.get('ad_bottom').getContent();
    req.cats1 = JSON.stringify($('#cats1').chosen().val());
    req.cats2 = JSON.stringify($('#cats2').chosen().val());
    
    Ajax.request(
      __requrl + 'submit_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
      },
      null
    );
  };

  function delete_file(id) {
    var req = Utils.get_by_id(id, __images);
    Ajax.request(
      __requrl + 'delete_file',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        Utils.splice_by_id(id, __images);
        render_images();
      },
      { confirm: 1 }
    );
  };
  /*]]>*/
</script>